<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <title>Intro to jQuery Mobile</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" /> 
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
        <style>
            body {
                display: -moz-box;
                display: -webkit-box;
                -moz-box-align: center;
                -webkit-box-align: center;
                -moz-box-pack: center;
                -webkit-box-pack: center;
                background-color: rgb(221,221,221);
            }
        </style>
    </head>
    <body>
        <div data-role="page" id="page1" style="top: 25px;">
            <div data-role="header" data-position="inline">
                <a href="${applicationScope.webApp.root}/mobile?command=menuList&page=${requestScope.previous}" data-icon="arrow-l" data-theme="b">上一页</a>
                <h1>${requestScope.page}/${requestScope.pageCount}</h1>
                <a href="${applicationScope.webApp.root}/mobile?command=menuList&page=${requestScope.next}" data-icon="arrow-r" data-theme="b">下一页</a>
            </div>
            <div data-role="content">
                <div class="ui-grid-${requestScope.menuController.colsCount}">
                    <c:forEach items="${requestScope.menuList}" var="item">
                        <div class="ui-block-${requestScope.menuController.colIndex}">
                            <div style="height:110px;" class="ui-bar ui-bar-c">
                                <table style="background-color: white; width: 100%">
                                    <tr>
                                        <td>
                                            <img src="${applicationScope.webApp.root}/images/${item.id}/menu_${item.id}_portrait_75x100.JPG"/>
                                        </td>
                                        <td>
                                            <div style="position:absolute; top:10px; right:20px;"><a href="#" data-role="button" data-theme="b">下 载</a></div>
                                            <span style="display: block; line-height: 25px; color: black; font-size: 20px;">${item.title}</span>
                                            <span style="display: block; line-height: 25px; color: gray; font-size: 15px">${item.name}</span>
                                            <span style="display: block; line-height: 25px; color: gray; font-size: 15px">${item.storeId.address}</span>
                                            <span style="display: inline; line-height: 25px; color: gray; font-size: 12px">共有123人下载</span>
                                            <span style="display: inline; line-height: 25px; color: gray; font-size: 12px; padding-left: 20px; ">好评率91%</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </c:forEach>
                </div><!-- /grid-c --> 
            </div><!-- /content -->
            <div data-role="header" data-position="inline">
                <a href="${applicationScope.webApp.root}/mobile?command=menuList&page=${requestScope.previous}" data-icon="arrow-l" data-theme="b">上一页</a>
                <h1>${requestScope.page}/${requestScope.pageCount}</h1>
                <a href="${applicationScope.webApp.root}/mobile?command=menuList&page=${requestScope.next}" data-icon="arrow-r" data-theme="b">下一页</a>
            </div>
        </div><!-- /page --> 
    </body>
</html>
